<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
		<meta content="yes" name="apple-mobile-web-app-capable">
		<meta content="black" name="apple-mobile-web-app-status-bar-style">
		<meta content="telephone=no" name="format-detection">
		<meta content="email=no" name="format-detection">
		<title>注册登录</title>
		<link rel="stylesheet" href="./css/style.css">		
		<script src="js/vue.min.js"></script>
		<script src="js/vue-resource.min.js"></script>
		<style>
			.goSignUp {
				padding: 0 30px;
				text-align: right;
			}
			.list {
				margin: 50px auto 20px;
			}
		</style>
	</head>
	<body>

		<div id="index-box">
			<div class="logo">
				<img src="./img/logo.png">
				<h1>安盟股份</h1>
			</div>
			<!-- 注册 -->
			<div v-if="!indexType">
				<div class="list">
					<div class="name">
						<img src="./img/icon_name.png">
						<input type="stylesheet" v-model="login_in_uname" placeholder="输入你的姓名">
					</div>
					<div class="name">
						<img src="./img/icon_phone.png">
						<input type="stylesheet" v-model="login_in_utel" placeholder="输入你的电话">
					</div>
					<div class="name">
						<img src="./img/icon_cert.png">
						<input type="stylesheet" v-model="login_in_ucode" placeholder="输入验证码">
						<button type="confirm" class="button_2" @click="getUcode">{{content}}</button>
					</div>
					<div class="name">
						<img src="./img/icon_company.png">
						<input type="stylesheet" v-model="login_in_uaddress" placeholder="输入你的工作单位">
					</div>
				</div>
				<p class="goSignUp" @click="goSignUp" style="color: #191d80;">去登录 > ></p>
				<button type="confirm" class="button_1" @click="postSubmit">注册</button>
			</div>
			
			
			<!-- 登录 -->
			<div v-if="indexType">
				<div class="list">
					<div class="name">
						<img src="./img/icon_phone.png">
						<input type="stylesheet" v-model="login_up_utel" placeholder="输入你的电话">
					</div>
					<div class="name">
						<img src="./img/icon_cert.png">
						<input type="stylesheet" v-model="login_up_ucode" placeholder="输入验证码">
						<button type="confirm" class="button_2" @click="getUcodeLogin">{{content}}</button>
					</div>
				</div>
				<p class="goSignUp" @click="goSignUp" style="color: #191d80;">去注册 > ></p>
				<button type="confirm" class="button_1" @click="postLoginSubmit">确定</button>

			</div>
								
			
		</div>

		<script>
			new Vue({
				el: '#index-box',
				data: {
					// 登录 indexType == 1 true  注册 indexType == 2 false
					indexType: true,
					url: 'https://newwk.sjwke.com/app/index.php?i=62&c=entry&do=front&m=smc_zhongchou',
					// 注册信息
					login_in_utel: '',
					login_in_uname: '',
					login_in_ucode: '',
					login_in_uaddress: '',
					// 登录信息
					login_up_utel:'',
					login_up_ucode:'',
					
					// 验证码校验
					content: '发送验证码',
					totalTime: 10,
					canClick: true, //添加canClick
					// 校验 注册 验证码
					login_in_yzUcode: 123456,
					login_up_yzUcode:123456
				},
				methods: {
					// 去注册
					goSignUp() {
						let that = this
						that.indexType = !that.indexType
					},
					// 提交登录信息
					postLoginSubmit() {
						let that = this
						var myreg = /^[1][3,4,5,7,8][0-9]{9}$/;
						if ( that.login_up_ucode == '' || that.login_up_utel == '') {
							alert("请填写完整信息")
							return false
						} else if (that.login_up_yzUcode != that.login_up_ucode || that.login_up_yzUcode == '') {
							alert('您的验证码填写有误')
							return false
						}
						// 注册接口   传参op= register	mobile手机号   name姓名     company公司名称   
						this.$http.post(that.url, {
							op: 'land',
							mobile: that.login_up_utel,
						}, {
							emulateJSON: true
						}).then(function(res) {
							console.log(res)
							if(res.body.status == 1){								
								alert(res.body.msg)								
							}else if(res.body.status == 0){
								var amStorage = window.localStorage
								amStorage.userInfo = JSON.stringify(res.body)
								window.location.href = "./product_list.html";
							}
						}, function(res) {
							console.log(res.status);
						});
					},
					// 登录验证码				
					getUcodeLogin() {
						// 判断手机号
						var myreg = /^[1][3,4,5,7,8][0-9]{9}$/;
						if (myreg.test(this.login_up_utel) == false) {
							alert('您的手机号填写错误')
							return false
						}
						if (!this.canClick) return //改动的是这两行代码
						this.canClick = false
						this.content = this.totalTime + 's重新发送'
						let clock = window.setInterval(() => {
							this.totalTime--
							this.content = this.totalTime + 's重新发送'
							if (this.totalTime < 0) {
								window.clearInterval(clock)
								this.content = '重新发送'
								this.totalTime = 30
								this.canClick = true //这里重新开启
							}
						}, 1000)
						// 注册短信验证码接口 传参op=registercode  mobile手机号
						this.$http.post(this.url, {
							op: 'logincode',
							mobile: this.login_up_utel,
						}, {
							emulateJSON: true
						}).then(function(res) {
							console.log(res)
							if (res.body.status == 0) {
								alert('验证码已发送，请注意查收')
								this.login_up_yzUcode = res.body.code
							} else {
								alert(res.body.msg)
							}
						}, function(res) {
							console.log(res.body.status);
						});
					},
					
					// 提交注册信息=======================================================================================
					postSubmit() {
						console.log(this.login_in_uaddress)
						console.log(this.login_in_yzUcode)
						console.log(this.login_in_ucode)
						console.log(this.login_in_uname)
						console.log(this.login_in_utel)
						
						let that = this
						var myreg = /^[1][3,4,5,7,8][0-9]{9}$/;
						if (that.login_in_uname == '' || that.login_in_ucode == '' || that.login_in_uaddress == '') {
							alert("请填写完整信息")
							return false
						} else if (that.login_in_yzUcode != that.login_in_ucode || that.login_in_yzUcode == '') {
							alert('您的验证码填写有误')
							return false
						}
						// 注册接口   传参op= register	mobile手机号   name姓名     company公司名称   
						this.$http.post(that.url, {
							op: 'register',
							mobile: that.login_in_utel,
							name: that.login_in_uname,
							company: that.login_in_uaddress,
							// code:that.login_in_ucode
						}, {
							emulateJSON: true
						}).then(function(res) {
							console.log(res)
							if(res.body.status == 0){
								var amStorage = window.localStorage
								amStorage.userInfo = JSON.stringify(res.body)
								alert(res.body.msg)
								window.location.href = "./product_list.html";
							}
						}, function(res) {
							console.log(res.body.status);
						});
					},
					// 注册验证码
					getUcode() {
						// 判断手机号
						var myreg = /^[1][3,4,5,7,8][0-9]{9}$/;
						if (myreg.test(this.login_in_utel) == false) {
							alert('您的手机号填写错误')
							return false
						}
						if (!this.canClick) return //改动的是这两行代码
						this.canClick = false
						this.content = this.totalTime + 's重新发送'
						let clock = window.setInterval(() => {
							this.totalTime--
							this.content = this.totalTime + 's重新发送'
							if (this.totalTime < 0) {
								window.clearInterval(clock)
								this.content = '重新发送'
								this.totalTime = 30
								this.canClick = true //这里重新开启
							}
						}, 1000)
						// 注册短信验证码接口 传参op=registercode  mobile手机号
						this.$http.post(this.url, {
							op: 'registercode',
							mobile: this.login_in_utel,
						}, {
							emulateJSON: true
						}).then(function(res) {
							console.log(res)
							if (res.body.status == 0) {
								alert('验证码已发送，请注意查收')
								this.login_in_yzUcode = res.body.code
							} else {
								alert(res.body.msg)
							}
						}, function(res) {
							console.log(res.status);
						});
					},

					wtry() {
						// 						this.$http.get(this.url, {
						// 							op: 'logincode',
						// 							mobile: that.utel
						// 						}).then(function(res) {
						// 							console.log(res)
						// 						}, function(res) {
						// 							console.log(res.status);
						// 						});
					}
				},
				created() {

				}
			})
		</script>
	</body>
</html>
